<template>

    <el-form
     
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="ruleForm"
    >
      <el-form-item label="账号" prop="username">
        <el-input v-model="ruleForm.username" type="text" disabled />
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
          <el-upload
            :action="action"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="coverRemove"
            name="file"
            :headers="{ 'Authorization':  token }"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            accept=".jpg,.jpeg,.png,.gif"
            :show-file-list="false"
            :on-exceed="handleExceed"
          >
            <div v-if="ruleForm.avatar">
              <img :src="ruleForm.avatar" alt="头像" style="max-height: 50px;" />
            </div>
            <div v-else>
              <el-icon><Plus /></el-icon>
            </div>
          </el-upload>
      </el-form-item>
      <el-form-item label="原始密码" prop="oldpassword">
        <el-input v-model="ruleForm.oldpassword" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="ruleForm.confirmPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model.number="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model.number="ruleForm.nickname" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleForm)">修改</el-button>
      </el-form-item>
    </el-form>
  </template>
  
<script setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import { adminUserService } from '@/api/adminUser';
  import { Plus } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  const router = useRouter()
  // 表单引用
  const token = localStorage.getItem('token');
  const action = '/adminApi/upload'; // 上传图片的接口地址
  // 表单数据
  const ruleForm = reactive({
    avatar:'',
    password:''
  });


  // 表单验证规则
  const rules = reactive({
    phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { 
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号',
        trigger: 'blur'
      }
    ]
  });

  const details = async ()=>{
    const response = await adminUserService.details(0);
    console.log(response);
    Object.assign(ruleForm, response.data.data);
  }

  details();
    
  // 提交表单
  const submitForm = async (ruleForm) => {
    try{
      // 更新管理员信息
      await adminUserService.updateAdmin(ruleForm.id,ruleForm);
      ElMessage.success('更新成功');
        //更新密码重新登录
      if(ruleForm.password){
          adminUserService.logOut();
          setTimeout(() => {
            router.push('/login');
          }, 2000);
      }
    }catch{

    }
     
  };
    
  const handlePictureCardPreview = (file) => {
      //console.log('Previewing file:', file);
  };
  const handleExceed = (files, fileList) => {
      //ElMessage.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  };
  const coverRemove = (file, fileList) => {
      ruleForm.avatar = '';
  };
  const handleSuccess = (response) => {
      if (response.code === 1) {
        ruleForm.avatar = response.data; // 假设返回的数据中有文件的URL
        ElMessage.success('上传成功');
      } else {
        ElMessage.error('上传失败');
      }
  };

  // 上传图片的回调函数
  const beforeAvatarUpload = (file) => {
      // const isImage = file.type.startsWith('image/');
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isImage) {
      //   ElMessage.error('只能上传图片!');
      // }
      // if (!isLt2M) {
      //   ElMessage.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
  };
  
  
</script>
  
<style scoped>

.ruleForm{
  min-height: 750px;
  width: 300px;
  margin-top: 50px;
}

</style>